<template>
  <s-layout title="合买大厅" navbar="custom" tabbar="/pages/index/index">
    <view class="container">
      <!-- 顶部标题 -->
      <view class="header">
        <text class="title">合买大厅</text>
      </view>

      <!-- 彩票类型筛选 -->
      <view class="lottery-type">
        <text class="subtitle">全部</text>
        <scroll-view scroll-x class="type-scroll">
          <view class="type-tags">
            <view
              class="type-tag"
              v-for="(type, index) in lotteryTypes"
              :key="index"
              :class="{active: activeType === type.value}"
              @click="switchType(type.value)"
            >
              {{ type.label }}
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 进度筛选 -->
      <view class="progress-filter">
        <view
          class="filter-item"
          v-for="(filter, index) in progressFilters"
          :key="index"
          :class="{active: activeFilter === filter.value}"
          @click="switchFilter(filter.value)"
        >
          {{ filter.label }}
        </view>
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>

      <!-- 无数据提示 -->
      <view class="empty-data">
        <text>暂无数据</text>
      </view>
    </view>
  </s-layout>
</template>

<script>
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';

  export default {
    components: { SLayout },
    data() {
      return {
        activeType: 'all', // 当前选中的彩票类型
        activeFilter: 'newest', // 当前选中的进度筛选
        lotteryTypes: [
          { label: '双色球', value: 'ssq' },
          { label: '福彩3D', value: 'fc3d' },
          { label: '七乐彩', value: 'qlc' },
          { label: '快乐8', value: 'kl8' },
          { label: '冠亚军竞选', value: 'gjyj' },
        ],
        progressFilters: [
          { label: '最新', value: 'newest' },
          { label: '7日命中', value: 'weekly' },
          { label: '我的关注', value: 'follow' },
        ],
      };
    },
    methods: {
      switchType(type) {
        this.activeType = type;
        // 这里可以添加加载对应类型数据的逻辑
      },
      switchFilter(filter) {
        this.activeFilter = filter;
        // 这里可以添加加载对应筛选数据的逻辑
      },
    },
  };
</script>

<style>
  .container {
    padding: 20rpx;
    background-color: #f5f5f5;
    height: 100vh;
  }

  /* 头部标题样式 */
  .header {
    padding: 30rpx 20rpx 20rpx;
  }

  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }

  /* 彩票类型筛选区域 */
  .lottery-type {
    padding: 0 20rpx;
    margin-bottom: 20rpx;
  }

  .subtitle {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 20rpx;
  }

  .type-scroll {
    width: 100%;
    white-space: nowrap;
  }

  .type-tags {
    display: inline-flex;
  }

  .type-tag {
    padding: 10rpx 30rpx;
    margin-right: 20rpx;
    background-color: #f0f0f0;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #666;
  }

  .type-tag.active {
    background-color: #e93b3d;
    color: #fff;
  }

  /* 进度筛选区域 */
  .progress-filter {
    display: flex;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
  }

  .filter-item {
    padding: 10rpx 25rpx;
    margin-right: 20rpx;
    font-size: 26rpx;
    color: #666;
    position: relative;
  }

  .filter-item.active {
    color: #e93b3d;
    font-weight: bold;
  }

  .filter-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background-color: #e93b3d;
    border-radius: 2rpx;
  }

  /* 分割线 */
  .divider {
    height: 1rpx;
    background-color: #eee;
    margin: 0 20rpx 30rpx;
  }

  /* 无数据提示 */
  .empty-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;
  }

  .empty-data text {
    font-size: 28rpx;
    color: #999;
  }
</style>